<template>
  <div class="container bgc">
    <div class="w1300">
      <div class="container-wrap" v-for="item in article" :key="item.userId">
        <article-com :article="item">
          <div
            class="comment-img-wrap flex-yc a"
            @click="$router.push('/forum/index/detail')"
          >
            <img src="" />
            <img src="" />
            <img src="" />
            <img src="" />
          </div>
        </article-com>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { articleType } from '@/pages/forum/types/article.ts'
import ArticleCom from '@/pages/forum/components/ArticleCom.vue'

const article = reactive<articleType[]>([
  {
    id: 1,
    tag: '【思路分享】',
    title: '活了？scBasePipeline2.2报错',
    content:
      '随着我们不断长大，大脑的前额皮质开始发育，理智脑的战斗力才慢慢增强。不过理智脑的战斗力其实表现在两方面：一方面是侧重学习、理解、记忆、运算的认知能力，即我们在校学习时主要锻炼的部分，另一方面则是侧重观察、反思、判断、选择的元认知能力。',
    commentSum: 30,
    commentLikeSum: 50,
    commentTime: '2023-02-26 13:26:30',
    user: {
      userId: 20,
      userAvatar: 'http://baidu.com/1.png',
      username: '李斯',
    },
  },
  {
    id: 1,
    tag: '【思路分享】',
    title: '活了？scBasePipeline2.2报错',
    content:
      '随着我们不断长大，大脑的前额皮质开始发育，理智脑的战斗力才慢慢增强。不过理智脑的战斗力其实表现在两方面：一方面是侧重学习、理解、记忆、运算的认知能力，即我们在校学习时主要锻炼的部分，另一方面则是侧重观察、反思、判断、选择的元认知能力。',
    commentSum: 30,
    commentLikeSum: 50,
    commentTime: '2023-02-26 13:26:30',
    user: {
      userId: 20,
      userAvatar: 'http://baidu.com/1.png',
      username: '李斯',
    },
  },
])
</script>

<style scoped lang="scss">
.container.bgc {
  padding-top: 15px;
  padding-bottom: 50px;
  background-color: #f7f8fa;
}

.container-wrap {
  padding: 22px 25px;
  margin-top: 16px;
  background-color: #fff;
  border-radius: 4px;

  .comment-img-wrap {
    flex-wrap: wrap;

    img {
      width: 188px;
      height: 162px;
      margin-right: 20px;
      background-color: #d9d9d9;
      border-radius: 4px;
    }
  }
}
</style>
